<template>
    <div class="personalData">
        <div v-if="pageFlag == 0">
            <div class="title">
                {{ $t('assemble.个人资料') }}
            </div>
            <div class="contentBox">

                <!-- <el-upload action="http://10.0.0.74:10012/api/login/upload" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove" multiple="false">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog> -->


                <div class="title">
                    {{ $t('assemble.基本信息') }}
                </div>
                <div class="submitBtn" @click="editVisible = true">
                    {{ $t('assemble.编辑用户信息') }}
                </div>

                <div class="personalBox">

                    <div class="itembox itemboxtop">
                        <span class="key">{{ $t('assemble.头像') }} </span>
                        <div v-if="userInfo.avatar">
                            <img :src="userInfo.avatar" class="avatar">
                        </div>
                        <div>
                            <el-upload class="avatar-uploader" action="http://10.0.0.74:10012/api/login/upload"
                                :show-file-list="false" :on-success="handleAvatarSuccess">
                                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                                <img src="../../../static/image/upload.png" style="margin-left: 50px;" alt="">

                            </el-upload>
                            <!-- <img src="../../../static/image/upload.png" alt=""> -->
                        </div>
                        <span class="imgtypx">{{ $t('assemble.限图片') }}，500k{{ $t('assemble.以内') }}</span>

                        <!-- <span class="submitBtn"
                            style="width:90px; display: inline-block; height: 30px; font-size: 13px; line-height: 30px; margin-left: 30px;"
                            @click="submitAvatar">保存头像</span> -->
                    </div>
                    <div class="itembox">
                        <span class="key">{{ $t('assemble.用户名') }}</span> <span>{{ userInfo.name }}</span>
                    </div>
                    <!-- <div class="itembox">
                        <span class="key">昵称</span> <span>{{ userInfo.name }}</span>
                    </div> -->
                    <div class="itembox">
                        <span class="key">{{ $t('assemble.邮箱地址') }}</span> <span>{{ userInfo.email }}</span>
                    </div>
                    <div class="itembox">
                        <span class="key">{{ $t('assemble.手机号') }}</span> <span>{{ userInfo.mobile }}</span>
                    </div>
                    <div class="itembox">
                        <span class="key">{{ $t('assemble.城市') }}</span> <span>{{ userInfo.city }}</span>
                    </div>
                    <div class="itembox">
                        <span class="key">{{ $t('assemble.密码') }}</span> <span>**********</span> <span class="editPassword"
                            @click="handleeditPassword">{{ $t('assemble.修改') }}</span>
                    </div>
                    <!-- <div class="itembox">
                        <span class="key">密码</span> <span>管理员</span>
                    </div> -->
                </div>


            </div>
        </div>
        <div v-if="pageFlag == 1">
            <div class="title">
                {{ $t('assemble.修改密码') }}
            </div>

            <div class="contentBox">

                <div class="btnBoxs">
                    <div class="btn" :class="{ btned: currIndex == '1' }" @click="handleBtned('1')">{{ $t('assemble.手机号') }}
                    </div>
                    <div class="btn" :class="{ btned: currIndex == '2' }" @click="handleBtned('2')">{{ $t('assemble.邮箱地址') }}
                    </div>
                </div>
                <el-form ref="forgetpassword" :model="forgetpassword" label-position="top">
                    <el-form-item v-if="currIndex == '1'" :label="$t('assemble.手机号')">
                        <el-input class="inputFlag" v-model="forgetpassword.moblieoremail"
                            :placeholder="$t('assemble.请输入手机号')"></el-input>
                        <img src="../../../static/image/canada.png"
                            style="width:20px; height:15px;position: absolute; top: 17px;left: 5px;" alt="">

                    </el-form-item>
                    <el-form-item v-else :label="$t('assemble.邮箱地址')">
                        <el-input v-model="forgetpassword.moblieoremail"
                            :placeholder="$t('assemble.请输入邮箱地址')"></el-input>
                    </el-form-item>

                    <!-- <el-form-item label="请输入你已绑定的邮箱">
                        <el-input v-model="forgetpassword.moblieoremail" placeholder="请输入手机号/邮箱地址"></el-input>
                    </el-form-item> -->

                    <el-form-item v-if="currIndex == '1'"
                        :label="$t('assemble.请输入手机号内的验证码')">
                        <el-input v-model="forgetpassword.authcode"
                            :placeholder=" $t('assemble.请输入验证码')"></el-input>
                        <p v-if="codeFlag" class="sendcode" @click="handlesendcode">{{ $t('assemble.发送验证码') }}</p>
                        <p v-else class="gain">
                            {{ time }}s
                        </p>
                    </el-form-item>
                    <el-form-item v-else :label="$t('assemble.请输入邮箱内的验证码')">
                        <el-input v-model="forgetpassword.authcode"
                            :placeholder="$t('assemble.请输入邮箱内的验证码')"></el-input>
                        <p v-if="codeFlag" class="sendcode" @click="handlesendcode">{{ $t('assemble.发送验证码') }}</p>
                        <p v-else class="gain">
                            {{ time }}s
                        </p>
                    </el-form-item>

                    <!-- <el-form-item label="请输入邮箱内的验证码">
                        <el-input v-model="forgetpassword.authcode" placeholder="请输入验证码"></el-input>
                        <p class="sendcode">发送验证码</p>
                    </el-form-item> -->

                    <el-form-item :label="$t('assemble.新密码')">
                        <el-input v-model="forgetpassword.newpassword" :placeholder=" $t('assemble.请输入新密码')"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('assemble.确认新密码')">
                        <el-input v-model="forgetpassword.okpassword" :placeholder="$t('assemble.请输入确认密码')"></el-input>
                        <span class="okpassword">{{ $t('assemble.输入新密码和确认新密码需要一致') }}</span>
                    </el-form-item>

                </el-form>




                <div class="btnbox">
                    <div class="btn ok" @click="submitEditPassword">{{ $t('assemble.确定') }}</div>
                    <div class="btn back" @click="back()">{{ $t('assemble.返回') }}</div>

                </div>
            </div>
        </div>


        <el-dialog title="编辑用户信息" :visible.sync="editVisible">


            <el-form :model="editform">
                <el-form-item :label="$t('assemble.用户名')">
                    <el-input v-model="editform.name"></el-input>
                </el-form-item>

                <el-form-item :label="$t('assemble.邮箱地址')">
                    <el-input v-model="editform.email"></el-input>
                </el-form-item>

                <el-form-item :label="$t('assemble.手机号')">
                    <el-input v-model="editform.mobile"></el-input>
                </el-form-item>
                <el-form-item :label="$t('assemble.城市')">
                    <el-input v-model="editform.city"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">提交</el-button>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import { userOwn, editPasswords, editInformations, editAvatar, getmobileCode, getemailCode } from "@/utils/api"
import debounce from '@/utils/debounce.js';

export default {
    data() {
        return {
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            pageFlag: 0,
            forgetpassword: {
                moblieoremail: '',
                authcode: '',
                newpassword: '',
                okpassword: '',
            },
            userInfo: {},
            currIndex: "1",
            editVisible: false,
            editform: {
                name: "",
                email: "",
                mobile: "",
                city: ''
            },
            avatatURL: "",
            time: 60,
            codeFlag: true,
            interval: null
        }
    },
    created() {
        this.getuserOwn()
    },
    methods: {


        async handlesendcode() {
            this.codeFlag = false
            let that = this
            that.interval = window.setInterval(function () {
                if ((that.time--) <= 0) {
                    that.codeFlag = true
                    that.time = 60
                    window.clearInterval(that.interval)
                }
            }, 1000)

            if (that.currIndex == '1') {
                let res = await getmobileCode({
                    mobile: '1' + this.forgetpassword.moblieoremail,
                })
                if (res.code == 1000) {
                    this.$message({
                        message: '验证码已发送，请注意查收！',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            } else {
                let res = await getemailCode({
                    email: this.forgetpassword.moblieoremail,
                })
                if (res.code == 1000) {
                    this.$message({
                        message: '验证码已发送，请注意查收！',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }



        },
        async submitAvatar() {
            let res = await editAvatar({
                token: localStorage.getItem('token'),
                avatar: this.avatatURL
            })
            if (res.code == 1000) {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
                location.reload()

            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
            console.log("avatar", this.imageUrl)
        },


        submitEdit() {
            debounce(() => {
                this.submitEdits()
            }, 500)
        },
        async submitEdits() {
            let data = {
                token: localStorage.getItem('token'),
                name: this.editform.name,
                email: this.editform.email,
                mobile: this.editform.mobile,
                city: this.editform.city,
            }
            let res = await editInformations(data)
            if (res.code == 1000) {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.editVisible = false
                // this.getuserOwn()
                setTimeout(() => {
                    location.reload()

                }, 1000)

            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
        },
        handleBtned(e) {
            this.currIndex = e
            this.forgetpassword.moblieoremail = ""
            this.codeFlag = true
            window.clearInterval(this.interval)
            this.time = 60
        },
        handleAvatarSuccess(res, file) {

            this.imageUrl = URL.createObjectURL(file.raw);
            this.avatatURL = res.data
            this.submitAvatar()
            console.log("用户信息", res, file)

        },
        async getuserOwn() {
            let res = await userOwn({
                token: localStorage.getItem('token')
            })
            console.log("用户信息", res)
            this.userInfo = res.data
            this.editform.name = res.data.name
            this.editform.email = res.data.email
            this.editform.mobile = res.data.mobile
            this.editform.city = res.data.city


        },

        submitEditPassword() {
            debounce(() => {
                this.submitEditPasswords()
            }, 500)
        },

        async submitEditPasswords() {
            let data = {}
            if (this.currIndex == '1') {
                data = {
                    type: this.currIndex,
                    username: '1' + this.forgetpassword.moblieoremail,
                    password: this.forgetpassword.newpassword,
                    password1: this.forgetpassword.okpassword,
                    code: this.forgetpassword.authcode,
                    token: localStorage.getItem('token')
                }
            } else {
                data = {
                    type: this.currIndex,
                    username: this.forgetpassword.moblieoremail,
                    password: this.forgetpassword.newpassword,
                    password1: this.forgetpassword.okpassword,
                    code: this.forgetpassword.authcode,
                    token: localStorage.getItem('token')
                }
            }

            console.log("data", data)
            // return
            let res = await editPasswords(data)
            if (res.code == 1000) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.pageFlag = 0
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
        },
        handleeditPassword() {
            this.pageFlag = 1
        },
        back() {
            this.pageFlag = 0
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-button--primary {
    background-color: #0057A7;
    border-color: #0057A7;
}

.btnBoxs {
    // width: 250px;
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;

    .btn {
        // width: 100px;
        height: 30px;
        border-radius: 10px;
        background-color: #F7F8FA;
        text-align: center;
        line-height: 30px;
        margin-right: 20px;
        cursor: pointer;
        padding: 0 20px;
    }

    .btned {
        background-color: #0057A7;
        color: #FFFFFF;
    }
}

.submitBtn {
    // width: 150px;
    height: 30px;
    border-radius: 10px;
    background-color: #0057A7;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
    cursor: pointer;
    float: right;
    padding: 0 20px;
    // margin-top: 50px;
    // margin-left: 50px;
}

.title {

    width: 900px;
    margin: 0 auto;
    height: 21px;
    font-size: 15px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 18px;
}

.personalData {
    width: 100%;
    height: 100vh;
    background: #F7F8FA;
    padding-top: 30px;



    .contentBox {
        width: 900px;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        margin: 30px auto;
        padding: 30px;
        padding-bottom: 109px;
        position: relative;

        .sendcode {
            // width: 110px;
            height: 30px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #0057A7;
            font-size: 13px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #0057A7;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: -3px;
            right: 365px;
            cursor: pointer;
            padding: 0 20px;
        }

        .inputFlag {

            // text-indent: 30px;
            ::v-deep .el-input__inner {
                text-indent: 20px;
            }
        }


        .gain {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #0057A7;
            line-height: 16px;
            position: absolute;
            top: 3px;
            right: 365px;
            cursor: pointer;
        }

        .okpassword {
            font-size: 17px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #D32526;
            line-height: 14px;
            position: absolute;
            top: -40px;
            left: 225px;
        }

        .personalBox {
            margin-top: 25px;
            height: 412px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            img {
                width: 51px;
                height: 51px;
                border-radius: 10px 10px 10px 10px;
                cursor: pointer;
            }

            .itemboxtop {
                display: flex;
                align-items: center;

                .imgtypx {
                    font-size: 11px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 14px;
                    margin-left: 30px;
                }

            }

            .itembox {
                font-size: 13px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 18px;

                .key {
                    display: inline-block;
                    // width: 70px;
                    margin-right: 30px;

                }

                .editPassword {
                    font-size: 13px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #0057A7;
                    line-height: 18px;
                    margin-left: 143px;
                    cursor: pointer;
                }
            }
        }

        .btnbox {
            width: 322px;
            display: flex;
            justify-content: space-between;
            margin-left: 238px;
            margin-top: 30px;

            .btn {
                // width: 132px;
                height: 50px;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                font-size: 18px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 50px;
                text-align: center;
                cursor: pointer;
                padding: 0 20px;
            }

            .ok {
                color: #FFFFFF;
                background: #0057A7;
            }

            .back {
                color: #333333;
                border: 1px solid #CCCCCC;
            }
        }
    }

}

::v-deep .el-input__inner {
    background: #F7F8FA;
    border: 1px solid #F7F8FA;
    width: 720px;
    height: 50px;
}
</style>